<template>
  <div>
    <div id="gansu" class="animate__animated animate__zoomIn"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl"; //3D地图插件
import { mapJson } from "@/assets/js/map_js/gansu.js";
import { zidingyi } from "@/assets/js/map_js/zidingyi.js";
import icon from "@/assets/img/icon.png";
import bgImg from "../../../../assets/img/mapcard.png";
import cardBg from "../../../../assets/img/cardBg.png";
// import { gansuRegions } from "@/assets/js/map_js/color";
export default {
  data() {
    return {
      area: "甘肃省",
      gansuRegions: [
        {
          name: "酒泉市",
          itemStyle: {
            color: "#0DF5FF",
          },
        },
        {
          name: "嘉峪关市",
          itemStyle: {
            color: "#0EEAF2",
          },
        },
        {
          name: "张掖市",
          itemStyle: {
            color: "#0EEAF2",
          },
        },
        {
          name: "金昌市",
          itemStyle: {
            color: "#07CEE1",
          },
        },
        {
          name: "武威市",
          itemStyle: {
            color: "#0CB0D1",
          },
        },
        {
          name: "庆阳市",
          itemStyle: {
            color: "#08A2C8",
          },
        },
        {
          name: "白银市",
          itemStyle: {
            color: "#08A2C8",
          },
        },
        {
          name: "兰州市",
          itemStyle: {
            color: "#08A2C8",
          },
        },
        {
          name: "定西市",
          itemStyle: {
            color: "#0B95C2",
          },
        },
        {
          name: "临夏回族自治州",
          itemStyle: {
            color: "#0B95C2",
          },
        },
        {
          name: "平凉市",
          itemStyle: {
            color: "#0593C0",
          },
        },
        {
          name: "天水市",
          itemStyle: {
            color: "#0484B9",
          },
        },
        {
          name: "甘南藏族自治州",
          itemStyle: {
            color: "#0484B9",
          },
        },
      ],
    };
  },

  mounted() {
    // 监听页面变化了重画echarts
    window.addEventListener("resize", () => {
      this.getMap();
    });
    this.$nextTick(() => {
      this.getMap();
    });
  },
  methods: {
    fontSize(res) {
      const clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;

      if (!clientWidth) return;
      let fontSize = clientWidth / 1920;
      let size = res < fontSize ? res : Math.floor(res * fontSize);
      return size;
    },
    getMap() {
      var dom = document.getElementById("gansu");
      var myChart = echarts.init(dom);
      var option;
      var geoJson = mapJson;
      myChart.showLoading();
      myChart.hideLoading();
      let that = this;
      echarts.registerMap("gansu", geoJson);
      echarts.registerMap("zidingyi", zidingyi);
      //   console.log(JSON.parse(geoJson));
      myChart.setOption(
        (option = {
          geo3D: {
            map: "gansu",
            roam: false,
            zLevel: "10",
            top: "0%", //组件的视图离容器四个方向的距离。
            left: "-10%",
            right: "0%",
            bottom: "0%",
            itemStyle: {
              color: "#0479B1",
              opacity: 1,
              borderWidth: this.fontSize(0.4),
              borderColor: "#000",
            },

            // 动画效果
            viewControl: {
              // autoRotate: true,

              // autoRotateAfterStill: 3,
              distance: 110, //可以改变地图远近距离---即大小
              // minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
              // alpha: 45, //Y轴旋转
              // maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
              // minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
              // beta: 8, //x轴旋转
              // maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
              // animation: true, // 是否开启动画。[ default: true ]
              // animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
              // animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
              // rotateMouseButton: "left", //旋转操作使用的鼠标按键
              rotateSensitivity: 0, //禁止旋转地图
              zoomSensitivity: "0", //实现禁止缩放地图
            },
            // 鼠标经过样式
            emphasis: {
              disabled: true, //是否可以被选中
              label: {
                //移入时的高亮文本
                show: true,
                color: "#333", //显示字体颜色
                fontSize: this.fontSize(14), //显示字体
                formatter: function (params) {
                  // 鼠标经过的回调函数
                  that.area = params.name;
                  // console.log("hover", params);
                  return params.name;
                },
              },

              itemStyle: {
                color: "#00ffb5", //显示移入的区块变白色
              },
            },
            select: {
              disabled: false, //不能点击地图
            },
            label: {
              show: true,
              position: "top",
              color: "#333", //地图初始化区域字体颜色
              fontSize: this.fontSize(14),
            },
            shading: "lambert",
            light: {
              //光照阴影
              main: {
                // color: "#fff", //光照颜色
                intensity: 0.8, //光照强度
                shadow: true, //是否显示阴影
                shadowQuality: "height", //阴影质量 ultra //阴影亮度
                alpha: 40,
                beta: 10,
              },
              ambient: {
                intensity: 0.7,
              },
            },
            // 对不同的区块进行着色
            regions: this.gansuRegions,
          },
          // 这个地图在页面中看不到，只是为了定位lines 和 涟漪
          geo: {
            zlevel: "8",
            show: true,
            map: "zidingyi",
            layoutCenter: ["49%", "57%"], //地图位置 左右   上下
            layoutSize: "100%", //地图大小
            roam: false,

            label: {
              // show: true,
              fontFamily: " Microsoft YaHei",
              fontSize: this.fontSize(12),
              color: "#fff",
            },

            itemStyle: {
              //每一块区域的样式
              normal: {
                areaColor: "rgba(255,255,255,0)",
                borderColor: "rgba(255,0,0,1)",
                borderWidth: 0,
              },
            },
            // 鼠标经过样式--区域颜色、和提示
            emphasis: {
              label: {
                show: false,
              },
              itemStyle: {
                borderColor: "rgba(255,255,255,0)",
                areaColor: "rgba(255,255,255,0)",
              },
            },
            select: {
              disabled: true, //不能点击地图
            },
            // tooltip 有两个---这是第一个
            tooltip: {
              show: true,
              triggerOn: "mousemove", // 鼠标移动时触发、
              padding: 0, // 提示框浮层内边距，
              backgroundColor: "rgba(255,255,0,0)", // 提示框浮层的背景颜色。
              formatter: function (params) {
                let showname = params;
                let str = `   
                <div
                  style="
                    width: 240px;
                    height: 170px; 
                    background: url('${bgImg}') no-repeat center;
                    background-size: 100% 100%;
                    padding-top: 10px;
                    position: relative;
                  "
                >
                  <div
                    style="
                      position: absolute;
                      left: 50%;
                      transform: translateX(-50%);
                      text-align: center;
                      overflow: hidden;
                      background: url('${cardBg}') no-repeat center;
                      background-size: 100% 100%;
                      width: 220px;
                      height:50px;
                    "
                  >
                   
                    <p
                      style="
                        width: 100%;
                        line-height: 30px;
                        font-size: 18px;
                        font-family: Source Han Sans CN;
                        font-weight: 500;
                        color: #ffffff;
                      "
                    >
                      ${that.area}
                    </p>
                    <p
                      style="
                        width: 100%;
                        font-size: 14px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #00ffb5;
                      "
                    >
                      甘肃省
                    </p>
                   
                  </div>
                  <div
                    style="
                      position: absolute;
                      top: 30%;
                      width: 100%;
                      height: 65%;
                      padding-top: 5%;
                      padding-left: 7%;
                      display: flex;
                      justify-content: space-between;
                      box-sizing: border-box;
                      flex-wrap: wrap;
                    "
                  >
                    <div
                      style="
                        min-width: 50%;
                        max-width: 100%;
                        box-sizing: border-box;
                        text-align: left;
                      "
                    >
                      <span
                        style="
                          font-size: 14px;
                          font-family: Source Han Sans CN;
                          font-weight: 400;
                          color: #00ffb5;
                        "
                        >成交宗数</span
                      >&emsp;<i
                        style="
                          font-size: 14px;
                          font-family: Source Han Sans CN;
                          font-weight: bold;
                          color: #fff90a;
                        "
                        >134356</i
                      >
                    </div>
                    <div
                      style="
                        min-width: 50%;
                        max-width: 100%;
                        box-sizing: border-box;
                        text-align: left;
                      "
                    >
                      <span
                        style="
                          font-size: 14px;
                          font-family: Source Han Sans CN;
                          font-weight: 400;
                          color: #00ffb5;
                        "
                        >成交金额</span
                      >&emsp;<i
                        style="
                          font-size: 14px;
                          font-family: Source Han Sans CN;
                          font-weight: bold;
                          color: #fff90a;
                        "
                        >5362万元</i
                      >
                    </div>
                    <div
                      style="
                        min-width: 50%;
                        max-width: 100%;
                        box-sizing: border-box;
                        text-align: left;
                      "
                    >
                      <span
                        style="
                          font-size: 14px;
                          font-family: Source Han Sans CN;
                          font-weight: 400;
                          color: #00ffb5;
                        "
                        >挂牌中项目</span
                      >&emsp;<i
                        style="
                          font-size: 14px;
                          font-family: Source Han Sans CN;
                          font-weight: bold;
                          color: #fff90a;
                        "
                        >4356</i
                      >
                    </div>
                    <div
                      style="
                        min-width: 50%;
                        max-width: 100%;
                        box-sizing: border-box;
                        text-align: left;
                      "
                    >
                      <span
                        style="
                          font-size: 14px;
                          font-family: Source Han Sans CN;
                          font-weight: 400;
                          color: #00ffb5;
                        "
                        >成交率</span
                      >&emsp;<i
                        style="
                          font-size: 14px;
                          font-family: Source Han Sans CN;
                          font-weight: bold;
                          color: #fff90a;
                        "
                        >56%</i
                      >
                    </div>
                    <div
                      style="
                        min-width: 50%;
                        max-width: 100%;
                        box-sizing: border-box;
                        text-align: left;
                      "
                    >
                      <span
                        style="
                          font-size: 14px;
                          font-family: Source Han Sans CN;
                          font-weight: 400;
                          color: #00ffb5;
                        "
                        >溢价金额</span
                      >&emsp;<i
                        style="
                          font-size: 14px;
                          font-family: Source Han Sans CN;
                          font-weight: bold;
                          color: #fff90a;
                        "
                        >4356万元</i
                      >
                    </div>
                  </div>
                </div>
              `;
                // console.log(str, "返回");
                return str;
              },
            },
          },
          // 提示牌--- tooltip 有两个---这是第二个----必须写这个，要不然不能出现tooltip提示牌
          tooltip: {
            show: true,
          },
        })
      );
      // myChart.on("click", (params) => {
      //   // console.log(params);
      //   that.$emit("activeIndex", that.area);
      // });
      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
      // 屏幕适配
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped>
#gansu {
  width: 860px;
  height: 620px;
  position: absolute;
  /* left: 50%; */
  top: 50%;
  transform: translateY(-50%);
  /* transform-origin: center ; */
  /* transform: rotateX(15deg) ; */
  background-color: #000;
}
.animate__animated.animate__zoomIn {
  --animate-duration: 1.5s;
}
</style>
